import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Button, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { HeroShaped } from 'components/organisms';
import { useHistory, useParams } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux'
import { setPreURL } from 'redux/actions/AuthActions'


const useStyles = makeStyles(() => ({
  image: {
    objectFit: 'cover',
  },
  fontWeight700: {
    fontWeight: 700,
  },
}));

const Hero = props => {
  const { data, className, onButtonClick, ...rest } = props;
  const classes = useStyles();
  let history = useHistory();
  const dispatch = useDispatch()
  const profileData = useSelector((state) => state.auth.profileData)
  const category = useSelector((state) => state.community.communityCategoryData)
  
  const createBlog = () => {
    if (profileData && profileData.id) {
      history.push(`/community/create`);
    } else {
      dispatch(setPreURL(`/community/${category.id}`))
      history.push(`/signin`);
    }
  }

  return (
    <div className={className} {...rest}>
      <HeroShaped
        leftSide={
          <div>
            <SectionHeader
              title={
                <span>
                  <Typography component="span" variant="inherit" color="primary">
                    {data.title}
                  </Typography>{' '}
                </span>
              }
              subtitle={data.sub_title}
              ctaGroup={[
                <Button variant="contained" color="primary" size="large"
                  onClick={createBlog}>
                  Create Now
                </Button>,
              ]}
              align="left"
              titleVariant="h3"
            />
          </div>
        }
        rightSide={
          <Image
            src={data.image ? data.image : "https://assets.maccarianagency.com/the-front/photos/elearning/elearning.jpg"}
            alt="..."
            className={classes.image}
            lazyProps={{
              width: '100%',
              height: '100%',
            }}
          />
        }
      />
    </div>
  );
};

Hero.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.object.isRequired,
};

export default Hero;
